<template>
  <div class="movie-filter-list space-y-6">
    <!-- 筛选器 -->
    <MovieFilterBase
      :show-sort="showSort"
      :show-filters="showFilters"
      :show-stats="showStats"
      :show-genre-filter="showGenreFilter"
      :show-universe-filter="showUniverseFilter"
      :show-language-filter="showLanguageFilter"
      :show-country-filter="showCountryFilter"
      :show-ai-filter="showAiFilter"
      :movie-count="movies.length"
      :has-more="hasMore"
      :extra-info="extraInfo"
      :initial-filters="initialFilters"
      :initial-sort="initialSort"
      :sort-options="sortOptions"
      @update:filters="handleFiltersUpdate"
      @update:sort="handleSortUpdate"
      @clear-filters="handleClearFilters"
    />

    <!-- 电影列表 -->
    <MovieList
      :movies="movies"
      :is-loading="isLoading"
      :has-more="hasMore"
      :show-tags="showTags"
      :empty-state-title="emptyStateTitle"
      :empty-state-description="emptyStateDescription"
      :show-clear-button="hasActiveFilters"
      @load-more="handleLoadMore"
      @clear-filters="handleClearFilters"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import MovieFilterBase from './MovieFilterBase.vue'
import MovieList from './MovieList.vue'

// Props
interface Props {
  // 显示控制
  showSort?: boolean
  showFilters?: boolean
  showStats?: boolean
  showGenreFilter?: boolean
  showUniverseFilter?: boolean
  showLanguageFilter?: boolean
  showCountryFilter?: boolean
  showAiFilter?: boolean
  showTags?: boolean
  
  // 数据
  movies: any[]
  isLoading?: boolean
  hasMore?: boolean
  extraInfo?: string
  
  // 初始值
  initialFilters?: Record<string, string>
  initialSort?: string
  sortOptions?: Array<{
    key: string
    label: string
    icon: string
  }>
  
  // 空状态
  emptyStateTitle?: string
  emptyStateDescription?: string
}

const props = withDefaults(defineProps<Props>(), {
  showSort: true,
  showFilters: true,
  showStats: true,
  showGenreFilter: true,
  showUniverseFilter: true,
  showLanguageFilter: true,
  showCountryFilter: true,
  showAiFilter: true,
  showTags: true,
  movies: () => [],
  isLoading: false,
  hasMore: false,
  extraInfo: '',
  initialFilters: () => ({
    genre: 'all',
    universe: 'all',
    language: 'all',
    country: 'all',
    ai: 'all'
  }),
  initialSort: 'views',
  sortOptions: () => [
    { key: 'relevance', label: '相关度', icon: '🎯' },
    { key: 'views', label: '播放量', icon: '👁️' },
    { key: 'updated_at', label: '最新更新', icon: '🕒' },
    { key: 'year', label: '上映年份', icon: '📅' },
    { key: 'rating', label: '评分最高', icon: '⭐' }
  ],
  emptyStateTitle: '暂无电影数据',
  emptyStateDescription: '请稍后再试'
})

// Emits
const emit = defineEmits<{
  'update:filters': [filters: Record<string, string>]
  'update:sort': [sort: string]
  'load-more': []
  'clear-filters': []
}>()

// 响应式数据
const currentFilters = ref({ ...props.initialFilters })
const currentSort = ref(props.initialSort)

// 计算属性
const hasActiveFilters = computed(() => {
  return currentFilters.value.genre !== 'all' || 
         currentFilters.value.universe !== 'all' || 
         currentFilters.value.language !== 'all' || 
         currentFilters.value.country !== 'all' || 
         currentFilters.value.ai !== 'all'
})

// 方法
const handleFiltersUpdate = (filters: Record<string, string>) => {
  currentFilters.value = filters
  emit('update:filters', filters)
}

const handleSortUpdate = (sort: string) => {
  currentSort.value = sort
  emit('update:sort', sort)
}

const handleLoadMore = () => {
  emit('load-more')
}

const handleClearFilters = () => {
  currentFilters.value = {
    genre: 'all',
    universe: 'all',
    language: 'all',
    country: 'all',
    ai: 'all'
  }
  emit('clear-filters')
  emit('update:filters', currentFilters.value)
}

// 监听外部筛选器变化
watch(() => props.initialFilters, (newFilters) => {
  if (newFilters) {
    currentFilters.value = { ...newFilters }
  }
}, { deep: true })

watch(() => props.initialSort, (newSort) => {
  if (newSort) {
    currentSort.value = newSort
  }
})
</script>
